<template>
  <v-card shadowType="never">
    <div class="header-box">
      <div class="right-box">
        <template v-for="(item, index) in searchList" :key="index">
          <span style="font-size: 14px;">{{ item.label }}:</span>
          <el-input
            style="max-width: 150px; margin: 10px;"
            :placeholder="`请输入${item.label}`" 
            v-model="item.searchValue"></el-input>
        </template>
      </div>
      <div class="left-box">
        <el-button
          type="primary"
          @click="search"
        >
          搜索
        </el-button>
        <el-button size="default" @click="reset">重置</el-button>
      </div>
    </div>
  </v-card>
</template>

<script setup lang="ts">
import { ref, reactive, defineExpose, defineEmits, defineProps, computed, onMounted } from 'vue'
const props = defineProps({
  pageConfig:{
    type: Object,
    default: () => ({})
  }
})
const emit = defineEmits(['search'])
// 计算需要显示搜索的字段
const searchList = computed(() => {
  const arr = props.pageConfig.columns.filter(item => item.search)
  return arr
})
// 搜索
const search = () => {
  // 处理搜索条件
  let searchParams = {

  }
  searchList.value.forEach(item => {
    if(item.searchValue) {
      searchParams[item.prop] = item.searchValue
    }
  })
  emit('search', searchParams)
}
// 重置
const reset = () => {
  searchList.value.forEach(item => {
    item.searchValue = ''
  })
}
</script>

<style scoped lang="scss">
.header-box {
  height: 100%;
  padding-bottom: 9px;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  flex-wrap: wrap;
  .right-box {
    display: flex;
    align-items: center;
    height: 40px;
    flex-wrap: wrap;
  }
  .left-box {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap-reverse;
    align-items: center;
  }
}
</style>